import { Button, Input, Modal } from 'antd'
import React, { useState } from 'react'
import { QRCodeCanvas } from 'qrcode.react';
import styles from './index.modules.less'

const Wrapper = () => {
    const [textValue, settextValue] = useState<string>('')
    const [imageValue, setimageValue] = useState<string>('https://dgimg-1306779837.cos.ap-shanghai.myqcloud.com/20221028/jhn5vOo9.png')

    // const changeCanvasToPic = () => {
    //     const canvasImg = document.getElementById('qrCode') as HTMLCanvasElement; // 获取canvas类型的二维码
    //     const img = new Image();
    //     img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
    //     // 获取文件对象
    //     const ImageFile = dataURLtoFile(img.src, "二维码")
    //     console.log(ImageFile, 'ImageFile');
    //     const aload = document.createElement('a')
    //     aload.href = img.src;
    //     aload.download = '二维码'; // 图片name
    //     aload.click()
    // };

    const changeCanvasToPic = () => {
        const canvasImg = document.getElementById('qrCode') as HTMLCanvasElement; // 获取canvas类型的二维码
        const img = new Image();
        img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
        // 获取文件对象
        const ImageFile = dataURLtoFile(img.src, "二维码")
        console.log(ImageFile, 'ImageFile');

    };
    const dataURLtoFile = (dataurl: any, filename: any) => {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    }
    return (
        <div className={styles.Wrapper}>
            <div className={styles['text-content']}>
                <div className={styles['text-warp-left']}>文本内容:</div>
                <div className={styles['text-warp-right']}>
                    <Input.TextArea placeholder='输入文本内容' style={{ height: "100%" }} onChange={(e) => { settextValue(e.target.value) }}></Input.TextArea>
                </div>
            </div>
            <div className={styles['text-content']}>
                <div className={styles['text-warp-left']}>中间logo图片地址:</div>
                <div className={styles['text-warp-right']}>
                    <Input.TextArea placeholder='例如https://baidu.com/image.png' style={{ height: "100%" }} onChange={(e) => { setimageValue(e.target.value) }}></Input.TextArea>
                </div>
            </div>
            <h3 style={{ textAlign: "center" }}>二维码实时生成，无需刷新</h3>
            <QRCodeCanvas
                id="qrCode"
                value='https://818ps.com/'
                size={120} // 二维码的大小
                fgColor="#000000"// 二维码的颜色
                bgColor="#ffffff" //二维码背景色
                level='H'
                // includeMargin={true}
                imageSettings={{ // 二维码中间的logo图片
                    src: imageValue,
                    height: 30,
                    width: 60,
                    excavate: true, // 中间图片所在的位置是否镂空
                }}
            />
        </div>
    )
}

export default Wrapper